<template>
  <view class="bg-white box">
    <u-cell>
      <template #title>
        <view>
          <u-text :text="info.eventName"></u-text>
          <u-text :text="info.eventNumber" type="info" size="small"></u-text>
        </view>
      </template>
      <template #right-icon>
        <u-tag type="error" :text="eventType" plain></u-tag>
      </template>
      <template #label>
        <view class="cus-lable">
          <u-text :text="info.locateAddress"></u-text>
          <u-text :text="info.registrantTime" type="info" size="small"></u-text>
        </view>
      </template>
    </u-cell>
    <view class="bottom" v-if="!onlyRead">
      <view class="flex-row flex-1 justify-center text-center" @click="setDefault(res)">
        <u-icon name="pushpin" size="40rpx" color="#0175ff" label="确认事件"></u-icon>
        <!-- <text>设为默认</text> -->
      </view>
      <u-line margin="0 1em" color="grey" length="1rem" direction="col" />
      <view class="flex-row flex-1 justify-center" @click="toAddSite(res)">
        <u-icon name="edit-pen" size="40rpx" color="#0175ff" label="处理反馈"></u-icon>
      </view>
      <u-line margin="0 1em" color="grey" length="1rem" direction="col" />
      <view class="flex-row justify-cente flex-1 justify-center" @click="delAddSite(res)">
        <u-icon name="trash" size="40rpx" color="#0175ff" label="作废"></u-icon>
      </view>
    </view>
  </view>
</template>
<script>

export default {
  props: {
    info: {
      type: Object,
      default: () => ({}),
    },
    dictConfig: {
      type: Array,
      default: () => ([]),
    },
    onlyRead: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    dictConfig: {
      handler(newVal) {
        console.log(newVal);
      },
      deep: true,
    },
  },
  computed: {
    eventType() {
      const dict = this.dictConfig.find(x => x.dictKey === this.info.eventType) || {};
      return dict.dictLabel || this.info.eventType || '-';
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.cus-lable {
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: center;
  padding: 6px 0px;
}

.bottom {
  display: flex;
  font-size: 28rpx;
  justify-content: space-evenly;
  color: #999999;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
}

.bg-white {
  background-color: white;
}

.box {
  margin: 6px;
  box-shadow: -2px 2px 10px lightgray;
  border-radius: 6px;
  overflow: hidden;
  flex: auto;
}
</style>
